<template>
  <div class="flex mb-1 gap-2">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      @click="tabClick(item)"
      :class="{ tabItem: true, active: tabActive === item.value }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script lang="ts" setup>
const { tabList, extraInfo } = defineProps<{
  tabList: CommonTypes.tabList[]
  extraInfo?: any
}>()
const emits = defineEmits<{ (e: 'tabHandle', value: CommonTypes.tabList, extraInfo?: any): void }>()

import { ref } from 'vue'

const tabActive = ref(tabList[0].value)

const tabClick = (e: CommonTypes.tabList) => {
  tabActive.value = e.value
  emits('tabHandle', e, extraInfo)
}
</script>

<style scoped lang="less">
.tabItem {
  padding: 0.25rem 0.75rem /* 12px */;
  font-size: 0.875rem /* 14px */;
  line-height: 1.25rem /* 20px */;
  color: #d3d4d4;
  background: #042d68;
  cursor: pointer;
  transition: all 0.5s;
}
.active {
  background: linear-gradient(360deg, #0071f2 0%, #3a96ff 100%);
  color: #fff;
  transition: all 0.5s;
}
</style>
